<!DOCTYPE html>
<html>

<head>
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css"> -->
  <link rel="stylesheet" href="../public//bulma.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  <link rel="stylesheet" href="../public/styles.css" />
</head>

<body>
  <div id="app">
    <h2 class="title has-text-centered dividing-header">UpVote!</h2>
    <div class="section">
      <article v-for="submission in sortedSubmissions" v-bind:key="submission.id" class="media"
        :class="{ 'blue-border': submission.votes >= 20 }">
        <submission-component v-bind:submission="submission" v-bind:submissions="sortedSubmissions">>
        </submission-component>
        <!-- <figure class="media-left">
          <img class="image is-64x64" v-bind:src="submission.submissionImage">
        </figure>
        <div class="media-content">
          <div class="content">
            <p>
              <strong>
                <a v-bind:href="submission.url" class="has-text-info">
                  {{ submission.title }}
                </a>
                <span class="tag is-small">#{{ submission.id }}</span>
              </strong>
              <br>
              {{ submission.description }}
              <br>
              <small class="is-size-7">
                Submitted by:
                ³²https://v3.vuejs.org/guide/list.html#maintaining-state
                Your first Vue.js Web Application 23
                <img class="image is-24x24" v-bind:src="submission.avatar">
              </small>
            </p>
          </div>
        </div>
        <div class="media-right">
          <span class="icon is-small">
            <i class="fa fa-chevron-up"></i>
            <strong class="has-text-info">{{ submission.votes }}</strong>
          </span>
        </div> -->
      </article>
    </div>

  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./seed.js"></script>
  <script src="./main.js"></script>
</body>

</html>